<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-21 09:24:35
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-27 08:42:57
-->
<template>
  <div>
    <div
      v-for="(item, index) in componentList"
      :key="item.id"
      :class="animationsClass(item.styles.animations)"
      class="chart-item"
      :style="{
        ...getComponentAttrStyle(item.attr, index),
        ...getTransformStyle(item.styles),
        ...getPreviewConfigStyle(item.preview),
        ...getBlendModeStyle(item.styles),
        ...getSizeStyle(item.attr),
      }"
    >
      <!-- 单组件 -->
      <component
        :is="item.chartConfig.chartKey"
        :id="item.id"
        :chart-config="item"
        :style="{
          ...getSizeStyle(item.attr),
          ...getFilterStyle(item.styles),
        }"
      />
    </div>
  </div>
</template>

<script>
import { getTransformStyle, getBlendModeStyle, getFilterStyle, animationsClass } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['componentList', 'editCanvasConfig']),
  },
  methods: {
    getTransformStyle,
    getBlendModeStyle,
    getFilterStyle,
    getComponentAttrStyle (attr, index) {
      const componentStyle = {
        zIndex: index + 1,
        left: `${attr.x}px`,
        top: `${attr.y}px`
      }
      return componentStyle
    },
    // 设置预览配置样式
    getPreviewConfigStyle (previewConfig) {
      const previewStyle = {}
      if (previewConfig) {
        if (previewConfig.overFlowHidden) {
          previewStyle.overflow = 'hidden'
        }
      }
      return previewStyle
    },
    // 设置大小
    getSizeStyle (attr, scale) {
      return {
        width: `${scale ? scale * attr.w : attr.w}px`,
        height: `${scale ? scale * attr.h : attr.h}px`
      }
    },
    animationsClass
  }
}
</script>

<style lang="scss" scoped>
.chart-item {
  position: absolute;
}
</style>